import React, { useState } from 'react'
import { Avatar, Typography, Space } from '@arco-design/web-react';
import { Button, Badge, Swiper, NavBar, Toast } from 'react-vant'
import { MoreO } from '@react-vant/icons'
import { useNavigate } from 'react-router-dom';
import { FixedSizeGrid as Grid } from 'react-window'
import AutoSizer from 'react-virtualized-auto-sizer'
import Mock from 'mockjs'
import { LazyLoadImage } from 'react-lazy-load-image-component'
import 'react-lazy-load-image-component/src/effects/blur.css'

// 模拟商品数据
const mockProducts = Mock.mock({
    'products|10000': [{
        'id|+1': 1,
        'name': '@ctitle(5, 10)',
        'price': '@float(100, 1000, 2, 2)',
        'image': '@image("200x200", "#50B347", "#FFF", "Product")',
        'description': '@cparagraph(1, 2)',
        'rating|1-5': 5,
        'sales|100-1000': 100
    }]
}).products

interface Product {
    id: number
    name: string
    price: number
    image: string
    description: string
    rating: number
    sales: number
}

// 商品卡片组件
const ProductCard = React.memo(({ product }: { product: Product }) => {
    const navigate = useNavigate()
    return (
        <div style={{
            border: '1px solid #eee',
            borderRadius: '8px',
            padding: '10px',
            height: '100%',
            boxSizing: 'border-box',
            backgroundColor: '#fff',
            transition: 'all 0.3s ease',
            cursor: 'pointer'
        }}>
            <LazyLoadImage
                src={product.image}
                alt={product.name}
                effect="blur"
                placeholderSrc=""
                style={{
                    width: '100%',
                    height: '200px',
                    objectFit: 'cover',
                    borderRadius: '4px'
                }}
                wrapperClassName="lazy-load-image-wrapper"
            />
            <h4 style={{ margin: '10px 0' }} onClick={() => {
                navigate('/detailCar', { state: product })
            }}>{product.name}</h4>
            <p style={{ color: '#666', fontSize: '14px' }}>{product.description}</p>
            <div style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                marginTop: '10px'
            }}>
                <span style={{ color: '#f00', fontSize: '18px', fontWeight: 'bold' }}>
                    ¥{product.price}
                </span>
                <span style={{ color: '#999', fontSize: '12px' }}>
                    已售 {product.sales}
                </span>
            </div>
            <div style={{ marginTop: '5px' }}>
                {Array(5).fill('★').map((star, index) => (
                    <span
                        key={index}
                        style={{
                            color: index < product.rating ? '#ffd700' : '#ddd',
                            fontSize: '14px'
                        }}
                    >
                        {star}
                    </span>
                ))}
            </div>
        </div>
    )
})

export default function Shou() {
    const [products] = useState<Product[]>(mockProducts)
    const router = useNavigate()

    // 虚拟列表配置
    const COLUMN_COUNT = 2
    const ROW_HEIGHT = 400
    const COLUMN_WIDTH = 300

    // 虚拟列表单元格渲染
    const Cell = ({ columnIndex, rowIndex, style }: { columnIndex: number, rowIndex: number, style: React.CSSProperties }) => {
        const index = rowIndex * COLUMN_COUNT + columnIndex
        if (index >= products.length) return null

        return (
            <div style={{
                ...style,
                padding: '10px'
            }}>
                <ProductCard product={products[index]} />
            </div>
        )
    }

    return (
        <div>
            {/* 虚拟列表商品展示 */}
            <div style={{ marginTop: '20px', height: '1000px' }}>
                <div style={{ height: '100%' }}>
                    <AutoSizer>
                        {({ height, width }) => (
                            <Grid
                                columnCount={COLUMN_COUNT}
                                columnWidth={COLUMN_WIDTH}
                                height={height}
                                rowCount={Math.ceil(products.length / COLUMN_COUNT)}
                                rowHeight={ROW_HEIGHT}
                                width={width}
                            >
                                {Cell}
                            </Grid>
                        )}
                    </AutoSizer>
                </div>
            </div>
        </div>
    )
}
